<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function Parent() {
      this.name = 'parent1'
      this.play = [1, 2, 3]
    }
    // 原型链继承
    function extends1() {
      function Child(name) {
        this.type = name
      }
      Child.prototype = new Parent()
      const s1 = new Child('child11')
      const s2 = new Child('child22')
      const p1 = new Parent()
      s1.play.push(4)
      console.log('s1', s1.play)
      console.log('s2', s2.play)
      console.log(p1)
    }
    // extends1()

    // 构造函数继承
    function extends2() {
      Parent.prototype.getName = function () {
        console.log('this.name===', this.name)
      }
      const p1 = new Parent()
      console.log('p1', p1)
      p1.getName()

      function Child() {
        Parent.call(this)
        this.type = 'child11'
      }
      const c1 = new Child()
      console.log('c1==', c1)
      console.log(c1.name)
      c1.getName()
    }
    // extends2()

    //组合继承
    function extends3() {
      console.log('****组合继承*****')
      Parent.prototype.likes = ['sing', 'swim']
      Parent.prototype.getName = function () {
        console.log('this.name===', this.name)
      }
      function Child() {
        Parent.call(this)
        this.type = 'child11'
      }
      Child.prototype = Object.create(Parent.prototype)
      // !!!!! 设置回子类自己的构造函数
      Child.prototype.constructor = Child

      const c1 = new Child()
      const c2 = new Child()
      c1.likes.push('books')
      // console.log('c1', c1 instanceof Child)
      // console.log('c2', c1 instanceof Parent)
      console.log(c1.likes, c2.likes)
    }
    // extends3()

    function extends4() {
      console.log('****寄生组合式继承*****')
      function clone(parent, child) {
        // 这里改用 Object.create 就可以减少组合继承中多进行一次构造的过程
        child.prototype = Object.create(parent.prototype)
        child.prototype.constructor = child
      }

      function Parent6() {
        this.name = 'parent6'
        this.play = [1, 2, 3]
      }
      Parent6.prototype.getName = function () {
        return this.name
      }
      function Child6() {
        Parent6.call(this)
        this.friends = 'child5'
      }

      clone(Parent6, Child6)

      Child6.prototype.getFriends = function () {
        return this.friends
      }

      let person6 = new Child6()
      console.log(person6) //{friends:"child5",name:"child5",play:[1,2,3],__proto__:Parent6}
      console.log(person6.getName()) // parent6
      console.log(person6.getFriends()) // child5
    }
    // extends4()

    function extends5() {
      console.log('****ES6中的extends实现继承****')
      class Parent {
        constructor(name) {
          this.name = name
        }
        getName = function () {
          console.log(this, this.name)
        }
      }
      class Child extends Parent {
        constructor(name, age) {
          super(name)
          this.age = age
        }
      }
      const c1 = new Child('child11', 28)
      c1.getName()
    }
    // extends5()

    function Parent22() {
      this.name = 'parent22'
    }
    function Child22() {}
    Child22.prototype = Object.create(Parent22.prototype)
    Child22.prototype.constructor = Child22
    let c22 = new Child22()
    console.log(c22, Child22.prototype)
    let cc = Object.create({ name: 'cc33' })
    console.log(cc)

    let pp2 = new Parent22()
    console.log(pp2)

    console.log('==================')

    function PParent1() {}
    PParent1.prototype.getName = function () {
      return 'zhen'
    }
    console.log('PParent1==', PParent1)
    console.log('PParent1==', PParent1.prototype)

    function Child11() {}

    Child11.prototype = Object.create(PParent1.prototype)
    Child11.prototype.getChildName = function () {
      return 'childName'
    }

    console.log('Child11==', Child11)
    console.log('Child11==', Child11.prototype)
    // console.log(Child11.prototype.__proto__ === PParent1.prototype)
  </script>
</html>
